---
title: Single horizontal list
description: A guide to use Fluid DnD with a single horizontal list.
---

import SingleHorizontalList from "@/components/svelte/SingleHorizontalList.svelte";
import { Code } from "@astrojs/starlight/components";

### List of number example

In this example we'll use **Fluid DnD** for sorting a horizontal list.
First, we're going to create a list of numbers and adding the property `direction` with value `horizontal`:

export const listOfNumbers = `<script lang="ts">
    const list = $state([1, 2, 3, 4, 5]);
    const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>`;

<Code code={listOfNumbers} lang="svelte" />

### Creating the view

export const highlightsDnD = ['direction="horizontal"','.number-list'];

export const listOfNumberInsideDnD = `
<div use:parent class="number-list">
  {#each list as element, index (element)}
    <div class="number" data-index = {index}>
      { element }
    </div>
  {/each}
</div>

<style>
/* ... */
.number-list {
  display: flex;
  flex-direction: row;
}
</style>
`;

<Code code={listOfNumberInsideDnD} lang="svelte" mark={highlightsDnD} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <SingleHorizontalList client:load />
</div>
